<template>
  <div class="app-container">
    <div class="manage-header">
      <el-form ref="Form" :inline="true" :model="Form" :rules="Rules">
        <el-form-item prop="turbineId">
          <el-input v-model="Form.turbineId" placeholder="请输入机组编号" :validate-event="false" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-button v-if="isShow1" type="primary" @click="getData">取消查询</el-button>
      </el-form>
    </div>
    <el-table
      stripe
      border
      height="440"
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{'text-align': 'center'}"
    >
      <el-table-column
        prop="turbineId"
        label="机组编号"
        width="100"
        align="center"
      />
      <el-table-column
        prop="manufacturer"
        label="生产厂商"
        align="center"
      />
      <el-table-column
        prop="turbineType"
        label="设备型号"
        align="center"
      />
      <el-table-column
        prop="turbineStatus"
        label="设备状态"
        align="center"
      />
      <el-table-column
        prop="addr"
        label="操作"
        align="center"
      >
        <template v-slot="scope">
          <el-button size="medium" round @click="handleEdit(scope.row)">安排检修</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
      <el-dialog
        title="检修任务安排表"
        :visible.sync="dialogVisible"
        width="60%"
        center
        top="5vh"
        :before-close="handleClose"
      >
        <el-form ref="form" :model="form" label-width="100px" label-position="left" :rules="rules">
          <el-form-item label="机组编号" prop="turbineId">
            <el-input v-model="form.turbineId" disabled />
          </el-form-item>
          <el-form-item label="检修人员" prop="jobNumber">
            <el-select v-model="form.jobNumber" placeholder="请选择检修人员">
              <el-option
                v-for="maintainer in maintainers"
                :label="maintainer.uname"
                :value="maintainer.jobNumber"
                :key = "maintainer.jobNumber"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="检修开始时间">
            <el-col :span="11">
              <el-date-picker
                v-model="form.date1"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                style="width: 100%;"
              />
            </el-col>
            <el-col :span="11">
              <el-time-picker
                v-model="form.date2"
                placeholder="选择时间"
                format="HH:mm"
                value-format="HH:mm"
                style="width: 100%;"
              />
            </el-col>
          </el-form-item>
          <el-form-item label="检修性质" prop="type">
            <el-radio-group v-model="form.type">
              <el-radio label="半年检" />
              <el-radio label="年检" />
              <el-radio label="技改" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="检修方法" prop="method">
            <el-checkbox-group v-model="form.method">
              <el-checkbox label="自动" />
              <el-checkbox label="手动" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="检修内容" prop="desc">
            <el-input v-model="form.desc" type="textarea" />
          </el-form-item>
          <el-form-item label="备注" prop="comment">
            <el-input v-model="form.comment" type="textarea" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getTurbineInfo } from '@/api/de_manage'
import { getAllMaintainerInfo, editMaintainer2 } from '@/api/maintainer'
import { addPreRepair, getNormalInfo } from '@/api/pre_repair'

export default {
  name: 'Task',
  data() {
    // const validateNum = (rule, value, callback) => {
    //   if (!(/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value)) {
    //     callback(new Error('请输入数字值'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      maintainers: [],
      total: 1,
      pageSize: 1,
      isShow1: false,
      dialogVisible: false,
      currentPage: 1,
      tableData: [],
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
      Form: {
        turbineId: ''
      },
      Rules: {
        turbineId: [
          { required: true, trigger: 'blur', message: '请输入机组编号' }
        ]
      },
      form: {
        turbineId: '',
        jobNumber: '',
        date1: '',
        date2: '',
        type: '',
        method: [],
        desc: '',
        comment: ''
      },
      rules: {
        turbineId: [
          { required: true, trigger: 'blur', message: '请输入机组编号' }
        ],
        jobNumber: [
          { required: true, trigger: 'change', message: '请选择检修人员' }
        ],
        type: [
          { required: true, trigger: 'change', message: '请输入检修类型' }
        ],
        method: [
          { type: 'array', required: false, trigger: 'change', message: '请选择检修方法' }
        ],
        desc: [
          { required: true, trigger: 'blur', message: '请输入检修内容' }
        ]
      },
      maintainContent: {
        jobNumber: '',
        maintenanceContents: '',
        startProcessTime: ''
      },
      Preventive: {
        maintenanceRole: '',
        periodicMaintenance: '',
        workTask: '',
        maintenanceTurbine: '',
        time: '',
        comment: ''
      }
    }
  },
  created() {
    this.getMaintainer()
    this.getData()
  },
  methods: {
    getMaintainer() {
      getAllMaintainerInfo().then(({ data }) => {
        this.maintainers = data.page.records
      })
    },
    getData() {
      getNormalInfo().then(({ data }) => {
        this.total = data.page.total
        this.pageSize = data.page.size
        this.tableData = data.page.records
        this.isShow1 = false
        this.Form.turbineId = ''
      })
    },
    onSubmit() {
      this.$refs.Form.validate((valid) => {
        if (valid) {
          getTurbineInfo(this.Form.turbineId).then(({ data }) => {
            if (data.page.total === 0) {
              this.$message({
                showClose: true,
                message: '没有查询到相应的风电机组信息',
                type: 'error'
              })
            } else {
              this.total = data.page.total
              this.pageSize = data.page.size
              this.tableData = data.page.records
              this.isShow1 = true
            }
          })
        }
      })
    },
    handleEdit(row) {
      this.form.uname = ''
      this.form.jobNumber = ''
      this.form.type = ''
      this.form.method = []
      this.form.desc = ''
      this.form.date1 = ''
      this.form.date2 = ''
      this.form.comment = ''
      this.dialogVisible = true
      this.$nextTick(function() {
        this.form = Object.assign(this.form, row)
      })
    },
    handleCurrentChange(pageNum) {
      getNormalInfo(pageNum).then(({ data }) => {
        this.total = data.page.total
        this.pageSize = data.page.size
        this.tableData = data.page.records
      })
    },
    handleClose() {
      // 关闭弹窗
      this.$refs.form.clearValidate()
      this.dialogVisible = false
      this.$refs.form.clearValidate()
    },
    cancel() {
      this.handleClose()
    },
    submit() {
      this.Preventive.maintenanceRole = this.form.jobNumber
      this.Preventive.time = this.form.date1 + ' ' + this.form.date2
      this.Preventive.comment = this.form.comment
      this.Preventive.workTask = this.form.desc
      this.Preventive.periodicMaintenance = this.form.type
      this.Preventive.maintenanceTurbine = this.form.turbineId
      this.$refs.form.validate((valid) => {
        if (valid) {
          addPreRepair(this.Preventive).then(() => {
            this.maintainContent.jobNumber = this.form.jobNumber
            this.maintainContent.maintenanceContents = this.form.desc
            this.maintainContent.startProcessTime = this.form.date1 + ' ' + this.form.date2
            editMaintainer2(this.maintainContent).then(() => {
              this.$message({
                type: 'success',
                message: '检修任务安排成功!'
              })
            })
          }).catch(() => {
          })
        }
      })
    }
  }
}
</script>

<style>
.app-container {
  margin: 0 auto;
}
</style>
